<template>
    <div class="root-lay">
        <el-radio-group class="radio-lay" v-model="tabIndex" size="mini">
            <!-- <el-radio-button class="radio-btn" :label="$t('message.smartPidPage.rightView.tabOne')"></el-radio-button>
            <el-radio-button class="radio-btn" label="北京"></el-radio-button> -->

            <el-radio-button
                v-for="(iten, index) in tabContent"
                :key="index"
                class="radio-btn"
                :label="iten"
            ></el-radio-button>
        </el-radio-group>

        <el-collapse
            v-if="tabIndex == tabContent[0]"
            v-model="activeNames"
            class="content-lay"
        >
            <div v-for="(item, index) in partProData" :key="index">
                <el-collapse-item
                    v-if="item.DataList && item.DataList.length > 0"
                    :title="item.title"
                    :name="index"
                    class="part-info"
                >
                    <template slot="title">
                        <div class="part-title">{{ item.propertySetName }}</div>
                    </template>

                    <div
                        v-for="(subItem, subIndex) in item.DataList"
                        :key="subIndex"
                        class="detail-item"
                    >
                        <div class="item-key">{{ subItem.propertyname }}</div>
                        <div class="item-value">{{ subItem.provalue }}</div>
                    </div>
                </el-collapse-item>
            </div>
        </el-collapse>

        <el-collapse
            v-if="tabIndex == tabContent[1]"
            v-model="activeRelativeNames"
            class="content-lay"
        >
            <el-collapse-item
                :title="$t('message.smartPidPage.tabTwoTiltleOne')"
                :name="0"
                class="part-info"
            >
                <template slot="title">
                    <div class="part-title">
                        {{ $t("message.smartPidPage.tabTwoTiltleOne") }}
                    </div>
                </template>

                <div class="detail-item">
                    <div class="item-line">
                        {{ selectElement.glid }}
                    </div>
                </div>
            </el-collapse-item>

            <el-collapse-item
                :title="$t('message.smartPidPage.tabTwoTiltleTwo') + '(1)'"
                v-if="pidInfo"
                :name="1"
                class="part-info"
            >
                <template slot="title">
                    <div class="part-title">
                        {{ $t("message.smartPidPage.tabTwoTiltleTwo") + "(1)" }}
                    </div>
                </template>

                <div
                    class="detail-item"
                    style="flex-direction: column"
                    @click="onOpenInNewPage(pidInfo.pidPath)"
                >
                    <div class="item-draw">
                        <div class="draw-title">{{ pidInfo.pidFileName }}</div>
                        <div class="draw-desc">{{ pidInfo.pidExplain }}</div>
                    </div>
                </div>
            </el-collapse-item>

            <el-collapse-item
                :title="
                    $t('message.smartPidPage.tabTwoTiltleTwo') +
                    '(' +
                    pidCommonDocs.length +
                    ')'
                "
                v-if="pidCommonDocs && pidCommonDocs.length > 0"
                :name="2"
                class="part-info"
            >
                <template slot="title">
                    <div class="part-title">
                        {{
                            $t("message.smartPidPage.tabTwoTiltleThree") +
                            "(" +
                            pidCommonDocs.length +
                            ")"
                        }}
                    </div>
                </template>

                <div
                    class="detail-item"
                    v-for="(item, index) in pidCommonDocs"
                    :key="index"
                    @click="onOpenInNewPage(item.path)"
                >
                    <div class="item-doc">
                        <el-image
                            class="doc-icon"
                            :src="genFileExtIcn(item.fileName)"
                        ></el-image>
                        <div class="doc-title">
                            {{ item.fileName }}
                        </div>
                    </div>
                </div>
            </el-collapse-item>
        </el-collapse>
    </div>
</template>

<script>
import _process from "@/utils/proess.js";
import { getPropertyInfo, getRelationDoc } from "@/api/api.js";

export default {
    props: {
        selectElement: Object,
    },

    data() {
        let _self = this;
        return {
            tabContent: [
                _self.$t("message.smartPidPage.rightView.tabOne"),
                _self.$t("message.smartPidPage.rightView.tabTwo"),
            ],
            tabIndex: _self.$t("message.smartPidPage.rightView.tabOne"),

            activeNames: [0, 1, 2],
            activeRelativeNames: [0, 1, 2],

            partProData: null,
            pidInfo: [],
            pidCommonDocs: [],
        };
    },

    watch: {
        selectElement: {
            handler: function(nVal) {
                this.getPropertyInfoApi();
                this.getRelationDocApi();
            },
            immediate: true
        },
    },

    methods: {
        genFileExtIcn(inName) {
            return _process.getFileIcon(inName);
        },

        onOpenInNewPage(inPath) {
            let index = inPath.lastIndexOf(".");
            if (index >= 0) {
                let extName = inPath.substr(index + 1).toLowerCase();
                if (extName) {
                    let lowExt = extName.toLowerCase();
                    if (
                        lowExt == "doc" ||
                        lowExt == "docx" ||
                        lowExt == "ppt" ||
                        lowExt == "pptx" ||
                        lowExt == "xls" ||
                        lowExt == "xlsx"
                    ) {
                        window.open(
                            "http://octopus.richtechcn.com/static/preview.html?fileUrl=" +
                                inPath
                        );
                    } else window.open(inPath);
                } else window.open(inPath);
            } else window.open(inPath);
        },

        getPropertyInfoApi() {
            this.partProData = null;
        //     let temp = { mileageID: 1, bitNumber: "PV-1290" };
            let temp = { mileageID: 62, bitNumber: this.selectElement.glid };
            
            getPropertyInfo(temp).then((res) => {
                console.log(res);
                this.partProData = res.data.data;
            });
        },

        getRelationDocApi() {
        //     let temp = { pltCode: 0, bitNumber: "PV-1290" };
            let temp = { pltCode: 0, bitNumber: this.selectElement.glid };
            this.pidSvgDocs = [];
            this.pidCommonDocs = [];
            getRelationDoc(temp).then((res) => {
                console.log(res);
                this.pidInfo = res.data.data.pidInfo;
                this.pidCommonDocs = res.data.data.docInfoList;
            });
        },
    },
};
</script>

<style scoped lang="scss">
.root-lay {
    display: flex;
    flex-direction: column;
    border: 1px solid #e1e1e1;
    height: 100%;
    box-sizing: border-box;
}

.radio-lay {
    width: 100%;
    padding: 20px;
    box-sizing: border-box;

    .radio-btn {
        ::v-deep .el-radio-button__inner {
            width: 125px;
        }
    }
}

.content-lay {
    height: 100%;
//     background-color: bisque;
    overflow: auto;

    .part-info {
        ::v-deep .el-collapse-item__header {
            background-color: #edeeef;
        }

        .part-title {
            width: 100%;
            background-color: #edeeef;
            padding: 0px 12px;
            font-size: 14px;
            font-weight: 500;
            color: #242424;
        }

        .detail-item {
            width: 100%;
            display: flex;
            .item-key {
                width: 50%;
                color: #aaaaaa;
                font-size: 16px;
                padding: 10px 15px;
                text-align: right;
            }

            .item-value {
                width: 50%;
                font-size: 16px;
                padding: 10px 15px;
            }

            .item-line {
                width: 100%;
                font-size: 16px;
                padding: 10px 15px;
            }

            .item-draw {
                width: 100%;
                font-size: 16px;
                padding: 10px 15px;

                .draw-title {
                }

                .draw-desc {
                    color: #aaaaaa;
                }
            }

            .item-doc {
                width: 100%;
                // font-size: 16px;
                padding: 10px 15px;
                display: flex;
                flex-direction: row;
                // border-bottom: 1px solid #e1e1e1;

                .doc-icon {
                    width: 32px;
                    height: 32px;
                    margin-top: 10px;
                }

                .doc-title {
                    width: calc(100% - 35px);
                    word-wrap: break-all;
                    word-wrap: break-word;
                    color: #000;
                    padding-left: 10px;
                }
            }
        }
    }
}
</style>